<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
    margin: 0;
    padding: 0;
    list-style: none;
} 
img {
    vertical-align: top;
}
/* body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
} */
#wrap {
    margin: 40px auto;
    position: relative;
    width: 600px;
    height: 400px;
    border: 2px solid #000;
    overflow: hidden;
}    
#pics {
    position: absolute;
    height: 400px;
    z-index: 1;
}
#pics li{
    width: 600px;
    height: 400px;
    overflow: hidden;
}
#pics p {
    width: 600px;
    height: 400px;
    /* background: red; */
    color:#fff;
    text-align: center;
}
#pics li:nth-child(2n) p{
    background: red;
}
#pics li:nth-child(2n+1) p{
    background: green;
}
.btn {
    position: absolute;
    top: 170px;
    z-index: 2;
    width: 60px;
    font: 40px/60px "宋体";
    text-align: center;
    background: rgba(255, 255, 255, .6);
    text-decoration: none;
    color: #000;
}
.btn:hover {
    background: #fff;
}
.prev {
    left: 0;
}
.next {
    right: 0;
}
#navs {
    position: absolute;
    left: 0;
    bottom: 10px;
    z-index: 3;
    width: 100%;
    text-align: center;
}
#navs a {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #fff;
}
#navs .active {
    background: #f60;
}
</style>
</head>
<body>
<div id="wrap">
    <ul id="pics">
        <li>
            <p>第一张图片</p>
        </li>
        <li>
            <p>第二张图片</p>
        </li>
        <li>
           <p>第三张图片</p>
        </li>
        <li>
            <p>第四张图片</p>
        </li>
        <li>
            <p>第五张图片</p>
        </li>
        <li>
             <p>和第一张图片一样</p>
        </li>
    </ul>
    <a href="javascript:;" class="btn prev"><</a>
    <a href="javascript:;" class="btn next">></a>
    <nav id="navs">
        <a class="active"></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
    </nav>
</div>
<script src="js/mTween.js"></script>
<script>
    /*
        1. 改变的是ul 的left值 当运动到最后一张的图片的时候
          ul的left 改为初始值 ，iNow重置
    */
    var oUl = document.querySelector('#pics');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var aBtn = document.querySelectorAll('#navs a');
    var lis = oUl.querySelectorAll('li');
    var iNow = 0 ; //控制左右
    var topInow = 0; // 控制上下
    var w = parseFloat( getCssStyle(lis[0]).width ) ;
    var h = parseFloat( getCssStyle(lis[0]).height ) ;
    var  dir = 'left';
    setUlDir();
    next.addEventListener('click',function(){
        dir = 'left' ;
        setUlDir();
        iNow ++;
        if( iNow == lis.length ) {
            css(oUl,'left',0);
            iNow = 1;
        }
        tab({
            left : -iNow * w
        });
    });
    prev.addEventListener('click',function(){
        dir = 'left' ;
        setUlDir();
        iNow --;
        if( iNow <= 0 ) {
            css(oUl,'left',0);
            iNow = lis.length-1;
        }
        tab({
            left : -iNow * w
        });
    });

    function tab( arrtObj ){
        mTween({
            el: oUl ,
            attr : arrtObj
        });
        aBtn.forEach(function(item){
            item.className = '';
        });
        if( dir == 'left') {
            aBtn[iNow%aBtn.length].className = 'active';
        }
        if( dir == 'top') {
            aBtn[topInow%aBtn.length].className = 'active';
        }
    }
    //设置方向
    function setUlDir(  ) {
        if( dir === 'left') {
            oUl.style.width = w * lis.length + 'px';
            oUl.style.height = h + 'px';
            oUl.style.bottom ='initial';
            lis.forEach( item=>{
                item.style.float = 'left';
            })
        }
        if( dir === 'top') {
            oUl.style.width = w + 'px';
            oUl.style.height = h * lis.length + 'px';
            oUl.style.left ='initial';
            lis.forEach( item=>{
                item.style.float = 'none';
            })
        }
    }

    //监听键盘 上38  下40 左37 右39
    document.addEventListener('keydown',function(e){
        if( e.keyCode === 37 ) {
            prev.click();
        }
        if( e.keyCode === 38 ) {
            dir = 'top' ;
            setUlDir();
            topInow --;
            if( topInow < 0 ) {
                css(oUl,'bottom',0);
                topInow = lis.length - 2;
            }   
            tab( {
                bottom : -topInow * h 
            });
            e.preventDefault();
          
            
        }
        if( e.keyCode === 39 ) {
            next.click();
        }
        if( e.keyCode === 40 ) {
            dir = 'top' ;
            setUlDir();
            topInow ++;
            if( topInow > lis.length -1 ) {
                css(oUl,'bottom',lis.length );
                topInow = 0;
            }   
            tab( {
                bottom : -topInow * h 
            });
            e.preventDefault();
        }
    })
    function getCssStyle( obj ) {
       return obj.currentStyle ? obj.currentStyle : document.defaultView.getComputedStyle(obj);
    }
</script>
</body>
</html>